<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
		<sc-form ref="dialogForm" :disabled="mode==='show'" :config="config" v-model="form" :loading="loading"/>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				config:{},
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				loading: false,
				isSaveing: false,
				//表单数据
				form: {},
				//所需数据选项
				groups: [],
				groupsProps: {
					value: "id",
					emitPath: false,
					checkStrictly: true
				}
			}
		},
		mounted() {
			//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
			this.config = {
				labelWidth: '60px',
				labelPosition: 'right',
				size: 'medium',
					formItems: [
						{
							label: "基本信息",
							component: "title",
						},
						{
							label: "姓名",
							name: "name",
							component: "input",
							span: 12,
							options: {
								placeholder: "请输入姓名",
							},
							rules: [
								{required: true, message: "请输入姓名", trigger: "blur"}
							]
						},
						{
							label: "电话",
							name: "contact",
							component: "input",
							span: 12,
							options: {
								placeholder: "请输入电话",
							}
						},
						{
							label: "年龄",
							name: "age",
							span: 12,
							component: "number"
						},
						{
							label: "性别",
							name: "gender",
							span: 12,
							component: "radio",
							options: {
								items: this.$tm('gender')
							}
						},
						{
							label: "地址",
							name: "address",
							component: "input",
							options: {
								placeholder: "请输入地址"
							}
						},
						{
							label: "补充信息",
							component: "title",
						},
						{
							label: "身份证",
							name: "prcId",
							labelWidth: '100px',
							component: "input",
							options: {
								placeholder: "请输入身份证"
							}
						},
						{
							label: "健康证",
							name: "healthId",
							labelWidth: '100px',
							component: "input",
							options: {
								placeholder: "请输入健康证"
							}
						},
						{
							label: "开户行所在地",
							name: "bankAddress",
							labelWidth: '100px',
							component: "input",
							options: {
								placeholder: "请输入开户行所在地"
							}
						},
						{
							label: "银行卡号",
							name: "bankId",
							labelWidth: '100px',
							component: "input",
							options: {
								placeholder: "请输入银行卡号"
							}
						},
						{
							label: "是否采茶工人",
							name: "isTeaPick",
							value: "0",
							span: 12,
							labelWidth: '100px',
							component: "radio",
							options: {
								items: this.$tm('commonBool')
							}
						},
						{
							label: "是否加工工人",
							name: "isTeaWorker",
							value: "0",
							span: 12,
							labelWidth: '100px',
							component: "radio",
							options: {
								items: this.$tm('commonBool')
							}
						},
						{
							label: "是否贫困户",
							name: "isPoor",
							value: "0",
							span: 12,
							labelWidth: '100px',
							component: "radio",
							options: {
								items: this.$tm('commonBool')
							}
						},
						{
							label: "是否买家",
							name: "isTeaBuyer",
							value: "0",
							span: 12,
							labelWidth: '100px',
							component: "radio",
							options: {
								items: this.$tm('commonBool')
							}
						},

						{
							label: "附件",
							name: "attachment",
							component: "multipleImage",
							buttonTip:"附件上传",
							maxSize: 1,
							limit: 3,
							tip: "最多上传3个文件,单个文件不要超过10M",
							options: {
								items: [
									{
										name:"attachment",
										label:"adsadsa"
									}
								]
							}
						}
					]
			}

			// setTimeout(()=>{
			// 	this.config = config
			// },500)
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			async submit(){
				console.info(this.$refs.dialogForm)
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if(!valid){
					return false
				}
				this.isSaveing = true;
				if(this.mode==='add'){
					await this.add()
				}else if(this.mode==='edit'){
					await this.edit()
				}
				this.isSaveing = false;
			},
			async add(){
				// 调用save方法
				this.$TOOL.response(await this.$API.factory.customer.insert.post(this.form),
					()=>{
						this.$emit('success', this.form, this.mode)
						this.visible = false;
					})
			},
			async edit(){
				// 调用update方法
				this.$TOOL.response(await this.$API.factory.customer.update.post(this.form),
					()=>{
						this.$emit('success', this.form, this.mode)
						this.visible = false;
					},()=>{

					})
			},
			//表单注入数据
			setData(data){
				// this.form.id = data.id
				// this.form.name = data.name
				// this.form.sex = data.sex
				// this.form.email = data.email
				// this.form.num = data.num
				// this.form.boolean = data.boolean

				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				Object.assign(this.form, data)
			}
		}
	}
</script>

<style>
</style>
